/*
 * @Author: xianfuyou
 * @Date: 2022-03-31 15:59:17
 * @LastEditors: your name
 * @LastEditTime: 2022-04-07 00:52:12
 * @Description: file content
 */
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import ButtonWarpCpn from '../../../components/CommBtn/CommBtn'
import AddLinkman from '../../../components/OrderCpn/AddLinkman';
import AddFollowStatus from '../../../components/OrderCpn/AddFollowStatus'

import {
  Row,
  Col,
  Form,
  Input,
  Select,
  Button,
  DatePicker,
  Table,
  Upload, message, Tag
} from 'antd'
import { UploadOutlined, PlusSquareFilled, QuestionCircleFilled, CheckOutlined } from '@ant-design/icons';
import './ModifyFollow.css'
import AddFollowType from '../../../components/OrderCpn/AddFollowType';

const { TextArea } = Input;

// 填充表单数据
const data = [];
for (let i = 0; i < 3; i++) {
  data.push({
    key: i,
    followType: `王者`,
    followStatus: `王者王者`,
    followObject: `王者王者`,
    downFollowOrderDate: `2022-03-30`,
    remark: '100',
    followPerson: `富贵`,
    enterFollowOrderDate: '2022-03-30',
    // accessory: [123],
  });
}

export default function ModifyFollow() {
  const { state } = useLocation()
  const { followInfo } = state
  console.log(state)
  // 当前跟单列表
  const [nowFollowInfo, setNowFollowInfo] = useState(followInfo)
  // 文件上传列表
  // const [AccessfileList, setAccessFileList] = useState([])
  // 结束跟单
  const [isFollow, setIsFollow] = useState(false)
  // 结束跟单
  const [isHint, setIsHint] = useState(false)
  // 新增联系人
  const [addLinkman, setAddLinkman] = useState(false)
  // 新增跟单状态
  const [addFowStatus, setAddFowStatus] = useState(false)
  // 新增跟单方式
  const [addFowType, setAddFowType] = useState(false)
  // 保存选中业务员
  const [salesman, setSalesman] = useState("0")
  // 获取表单内容
  const [form] = Form.useForm();

  useEffect(() => {
    setNowFollowInfo(followInfo)
    console.log(followInfo)
  }, [followInfo, state])

  // 跟单表单配置
  const checkGoodsTable = [
    {
      title: '跟单方式',
      dataIndex: 'followType',
      key: 'followType',
      width: 120,
    },
    {
      title: '跟单状态',
      dataIndex: 'followStatus',
      key: 'followStatus',
      width: 80,
    },
    {
      title: '跟单对象',
      dataIndex: 'followObject',
      key: 'followObject',
      width: 80,
    },
    {
      title: '下次联系',
      dataIndex: 'downFollowOrderDate',
      key: 'downFollowOrderDate',
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 100,
    },
    {
      title: '跟单人',
      dataIndex: 'followPerson',
      key: 'followPerson',
      width: 100,
    },
    {
      title: '结束跟单',
      dataIndex: 'enterFollowOrderDate',
      key: 'enterFollowOrderDate',
      width: 100,
    },
    // {
    //   title: '附件',
    //   dataIndex: 'accessory',
    //   key: 'accessory',
    //   width: 80,
    //   render: (accessory) => {
    //     return accessory.length > 0 ? <Tag color="#488dc9">附件</Tag> : <Tag color="#dddddd">无附件</Tag>
    //   }
    // }
  ]

  // 表单部分
  // 提交表单获取表单内容
  const onFinish = (values) => {
    console.log('values', values)
    console.log('form', form.getFieldValue())
    const resValues = {
      ...values,
      "enterFollowOrderDate": values['enterFollowOrderDate'] && values['enterFollowOrderDate'].format('YYYY-MM-DD HH:mm:ss'),
      "downFollowOrderDate": values['downFollowOrderDate'] && values['downFollowOrderDate'].format('YYYY-MM-DD HH:mm:ss'),
    }
    console.log('resValues', resValues);
  };
  // 重置表单
  const onReset = () => {
    form.resetFields();
  };

  // const handleChange = info => {
  //   console.log('123213')
  //   let fileList = [...info.fileList];

  //   // 1. Limit the number of uploaded files
  //   // Only to show two recent uploaded files, and old ones will be replaced by the new
  //   fileList = fileList.slice(-2);

  //   // 2. Read from response and show file link
  //   fileList = fileList.map(file => {
  //     if (file.response) {
  //       // Component will show file.url as link
  //       file.url = file.response.url;
  //     }
  //     return file;
  //   });
  //   console.log('fileList', fileList)
  //   setAccessFileList(fileList)
  // };

  // // 选择文件上传
  // const props = {
  //   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  //   onChange: handleChange,
  //   multiple: true,
  // };

  // 新增联系人
  const changeLinkman = () => {
    setAddLinkman(true)
  }

  // 新增跟单状态
  const changeFollowStatus = () => {
    setAddFowStatus(true)
  }

  // 新增跟单方式
  const changeFollowType = () => {
    setAddFowType(true)
  }

  // 修改业务员
  const changeSalesman = (value) => {
    setSalesman(value)
  }

  return (
    <div className={'modifyFollowOrder'}>
      {/* 添加联系人 */}
      <AddLinkman isShow={addLinkman} pOk={(res) => { setAddLinkman(res) }} pCancel={(res) => { setAddLinkman(res) }}></AddLinkman>
      {/* 新增跟单状态 */}
      <AddFollowStatus isShow={addFowStatus} pOk={(res) => { setAddFowStatus(res) }} pCancel={(res) => { setAddFowStatus(res) }}></AddFollowStatus>
      {/* 新增跟单状态 */}
      <AddFollowType isShow={addFowType} pOk={(res) => { setAddFowType(res) }} pCancel={(res) => { setAddFowType(res) }}></AddFollowType>
      {/* 添加订单表单 */}
      <Row className={'highFrom'}>
        <Col className={'title'}>新增跟单管理</Col>
        <Col className={"flag"} span={24}>
          <Row justify={'space-between'} align={'middle'}>
            <Col span={24}>
              <Form
                labelCol={{
                  span: 8,
                }}
                wrapperCol={{
                  span: 16,
                }}
                form={form}
                name="control-ref" onFinish={onFinish}
              >
                <Row>
                  <Col span={8}>
                    <Form.Item label="客户名称" name="clientName">
                      <span>zhangsan<Button size="small" type="primary" style={{ marginLeft: '5px', backgroundColor: '#d55866', border: '0px' }}>重选</Button></span>
                    </Form.Item>
                    <Form.Item label="跟单方式">
                      <Row>
                        <Col span={9}>
                          <Form.Item name="followType">
                            <Select size="small">
                              <Select.Option value="demo">Demo</Select.Option>
                            </Select>
                          </Form.Item>
                        </Col>
                        <Col style={{ marginLeft: '5px' }}>
                          <Form.Item>
                            <ButtonWarpCpn onClick={() => { changeFollowType() }} bgcolor="#5cad69" icon={<PlusSquareFilled />}>新增</ButtonWarpCpn>
                          </Form.Item>
                        </Col>
                      </Row>
                    </Form.Item>
                    <Form.Item label="跟单状态">
                      <Row>
                        <Col span={9}>
                          <Form.Item name="followStatus">
                            <Select size="small">
                              <Select.Option value="demo">Demo</Select.Option>
                            </Select>
                          </Form.Item>
                        </Col>
                        <Col style={{ marginLeft: '5px' }}>
                          <Form.Item>
                            <ButtonWarpCpn onClick={() => { changeFollowStatus() }} bgcolor="#5cad69" icon={<PlusSquareFilled />}>新增</ButtonWarpCpn>
                          </Form.Item>
                        </Col>
                      </Row>
                    </Form.Item>
                    <Form.Item label="跟单对象">
                      <Row>
                        <Col span={9}>
                          <Form.Item name="followObject">
                            <Select size="small">
                              <Select.Option value="demo">Demo</Select.Option>
                            </Select>
                          </Form.Item>
                        </Col>
                        <Col style={{ marginLeft: '5px' }}>
                          <Form.Item>
                            <ButtonWarpCpn onClick={() => { changeLinkman() }} bgcolor="#5cad69" icon={<PlusSquareFilled />}>新增</ButtonWarpCpn>
                          </Form.Item>
                        </Col>
                      </Row>
                    </Form.Item>
                    <Form.Item label="结束跟单">
                      {/* <Button style={{ "backgroundColor": "#d2d2d2", 'color': '#fff' }} size="small">结束跟单<CheckOutlined /></Button> */}
                      <Row>
                        <Col onClick={() => { setIsFollow(!isFollow) }} className={isFollow ? 'acitveFollow' : 'isFollow'} span={6}>结束跟单</Col>
                        <Col onClick={() => { setIsFollow(!isFollow) }} className={isFollow ? 'acitveBtn' : 'isBtn'} span={2}> <CheckOutlined /></Col>
                        <Col style={{ marginLeft: '5px', 'color': '#999' }}><QuestionCircleFilled /> </Col>
                      </Row>
                    </Form.Item>
                    <Form.Item label="下次联系" style={{ 'display': !isFollow ? '' : 'none', marginBottom: 0 }}>
                      <Form.Item name="downFollowOrderDate" style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                        <DatePicker size="small" />
                      </Form.Item>
                    </Form.Item>
                    <Form.Item label="是否提醒" style={{ 'display': !isFollow ? "" : 'none' }}>
                      <Row>
                        <Col span={20}>
                          <Row align={'middle'}>
                            <Col onClick={() => { setIsHint(!isHint) }} className={isHint ? 'acitveHint' : 'isHint'} span={4}>提醒</Col>
                            <Col onClick={() => { setIsHint(!isHint) }} className={isHint ? 'acitveHintBtn' : 'isHintBtn'} span={2}> <CheckOutlined /></Col>
                            <Col span={12} style={{ marginLeft: '5px' }}>
                              <Form.Item label="提前:" name="enterOrderDate">
                                <Select size="small">
                                  <Select.Option value="demo">Demo</Select.Option>
                                </Select>
                              </Form.Item>
                            </Col>
                            <Col>提醒</Col>
                            <Col style={{ marginLeft: '5px', 'color': '#999' }}><QuestionCircleFilled /> </Col>
                          </Row>
                        </Col>
                      </Row>
                    </Form.Item>
                    {/* <Form.Item label="附件" name="accessory">
                      <Upload {...props} fileList={AccessfileList}>
                        <ButtonWarpCpn bgcolor="#00b7ee" size="small">选择文件</ButtonWarpCpn>
                      </Upload>
                    </Form.Item> */}
                    <Form.Item label="备注" name="remark">
                      <TextArea rows={4} placeholder="maxLength is 6" />
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            </Col>
          </Row>
        </Col>
      </Row>
      {/* 添加商品接口 */}
      <Row className={'followRecord'} justify="space-between">
        <Col style={{ fontWeight: 'bold' }}>历史跟进记录</Col>
      </Row>
      {/* 选择商品表单 */}
      <Row className={'goodsLists'}>
        <Col span={24}>
          <Table
            pagination={false}
            size="small"
            columns={checkGoodsTable}
            dataSource={data}
          />
        </Col>
      </Row>
      {/* 处理业务员 保存及取消*/}
      <Row className={'salesmanAndSave'} justify="space-between">
        <Col>
          <span style={{ marginRight: '5px' }}>业务员</span>
          {/* <Tag color="#0099cc">超级管理员</Tag> */}
          <Select size="small" style={{ width: '120px' }} value={salesman} onChange={(e) => { changeSalesman(e) }}>
            <Select.Option value="0">超级管理员</Select.Option>
            <Select.Option value="1">管理员</Select.Option>
          </Select>
        </Col>
        <Col className={'saveHandle'}>
          <ButtonWarpCpn size="small" bgcolor="#448aca">保存</ButtonWarpCpn>
          <ButtonWarpCpn size="small" bgcolor="#505050">取消</ButtonWarpCpn>
        </Col>
      </Row>
    </div >
  )
}
